<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./js/index.css">
    <title>Document</title>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: '';
        }

        .clearfix:after {
            clear: both;
        }

        .box-card {
            width: 100%;
        }
    </style>
</head>

<body>
<div id="quick-open">
    <div v-for="(data, index) in allData" style="margin-bottom: 10px;">
        <el-card class="box-card">
            <template v-slot:header>
                <div class="clearfix">
                    <el-tag style="width: 90px; text-align:center; margin-right: 10px;">{{data.type
                    === '1' ?
                            '文件/文件夹' : 'Shell脚本'}}
                    </el-tag>
                    <span>{{data.code}}</span>
                    <el-button style="float: right; padding: 0px 3px" type="text"
                               @click="deleteData(index)">删除
                    </el-button>
                    <el-button style="float: right; padding: 0px 3px" type="text"
                               @click="handleOpenEdit(index)">修改
                    </el-button>
                </div>
            </template>
            <div v-for="message in data.messageList">{{message}}</div>
        </el-card>
    </div>

    <el-dialog title="新增" :visible.sync="dialogFormVisible" v-model:visible="dialogFormVisible"
               width="80%">
        <template v-slot:default>
            <el-form :label-position="left" label-width="80px" ref="form" :model="addForm"
                     :rules="addFormRules">
                <el-form-item label="文件类型">
                    <el-radio v-model="addForm.type" label="1">文件/文件夹</el-radio>
                    <el-radio v-model="addForm.type" label="2">Shell脚本</el-radio>
                </el-form-item>
                <el-form-item label="关键字" prop="code">
                    <el-input v-model="addForm.code"></el-input>
                </el-form-item>
                <el-form-item label="文件资源" prop="message">
                    <el-input type="textarea" v-model="addForm.message"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template v-slot:footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="updateFormVisible" v-model:visible="updateFormVisible"
               width="80%">
        <template v-slot:default>
            <el-form :label-position="left" label-width="80px" ref="updateForm" :model="updateForm"
                     :rules="addFormRules">
                <el-form-item label="文件类型">
                    <el-radio v-model="updateForm.type" label="1">文件/文件夹</el-radio>
                    <el-radio v-model="updateForm.type" label="2">Shell脚本</el-radio>
                </el-form-item>
                <el-form-item label="关键字" prop="code">
                    <el-input v-model="updateForm.code"></el-input>
                </el-form-item>
                <el-form-item label="文件资源" prop="message">
                    <el-input type="textarea" v-model="updateForm.message"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template v-slot:footer>
            <div class="dialog-footer">
                <el-button @click="updateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>

    <el-button type="primary" icon="el-icon-plus" @click="handleOpenAdd" circle
               style="position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;"></el-button>
</div>
</body>
<script src="./js/vue.global.js"></script>
<script src="./js/element3-ui.global.js"></script>
<script>
    const quickOpen = {
        mounted() {
            window.mVue = this
        },
        data() {
            return {
                addFormRules: {
                    code: [
                        {required: true, message: '请输入关键字', trigger: 'blur'}
                    ],
                    message: [
                        {required: true, message: '请输入文件资源', trigger: 'blur'}
                    ],
                },
                dialogFormVisible: false,
                updateFormVisible: false,
                addForm: {
                    code: '',
                    message: '',
                    type: '1'
                },
                updateForm: {
                    code: '',
                    oriCode: '',
                    message: '',
                    type: '',
                    rev: ''
                },
                allData: []
            }
        },
        methods: {
            handleAddSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (utools.db.allDocs().find((val) => {
                            return val.data.code === this.addForm.code
                        })) {
                            this.$message.error({message: 'keyword已存在', duration: 2000});
                            return;
                        }
                        utools.db.put({
                            _id: this.addForm.code,
                            data: {
                                code: this.addForm.code,
                                message: this.addForm.message,
                                type: this.addForm.type
                            }
                        })
                        let explain = this.addForm.type === '1' ? '打开' + this.addForm.code + '文件/文件夹' : '执行' + this.addForm.code + 'Shell脚本'
                        utools.setFeature({
                            "code": this.addForm.code,
                            "explain": explain,
                            "cmds": [this.addForm.code]
                        })
                        this.dialogFormVisible = false
                        this.initData()
                        this.$refs.form.resetFields();
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            handleEditSubmit() {
                if (this.updateForm.code != this.updateForm.oriCode
                    && utools.db.allDocs().find((val) => {
                        return val.data.code === this.addForm.code
                    })) {
                    this.$message.error('keyword已存在');
                    return;
                }
                utools.db.put({
                    _id: this.updateForm.code,
                    data: {
                        code: this.updateForm.code,
                        message: this.updateForm.message,
                        type: this.updateForm.type
                    },
                    _rev: this.updateForm.rev
                })
                utools.removeFeature(this.updateForm.code)
                let explain = this.updateForm.type === '1' ? '打开' + this.updateForm.code + '文件/文件夹' : '执行' + this.updateForm.code + 'Shell脚本'
                utools.setFeature({
                    "code": this.updateForm.code,
                    "explain": explain,
                    "cmds": [this.updateForm.code]
                })
                this.updateFormVisible = false
                this.initData()
                this.$refs.updateForm.resetFields();
            },
            handleOpenEdit(index) {
                this.updateFormVisible = true
                this.$nextTick(() => {
                    this.$refs.updateForm.resetFields();
                    let updateData = this.allData[index]
                    Object.keys(this.updateForm).forEach(v => {
                        this.updateForm[v] = updateData[v]
                    })
                    this.updateForm.oriCode = this.updateForm.code
                })
            },
            handleOpenAdd() {
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields();
                })
            },
            deleteData(index) {
                let code = this.allData[index].code
                utools.db.remove(code);
                utools.removeFeature(code);
                this.initData()
            },
            initData() {
                this.allData = []
                utools.db.allDocs().forEach(doc => {
                    this.allData.push({
                        id: doc._id,
                        code: doc.data.code,
                        message: doc.data.message,
                        messageList: doc.data.message.split('\n'),
                        type: doc.data.type,
                        rev: doc._rev
                    })
                })
            }
        }
    }
    Vue.createApp(quickOpen).use(Element3).mount('#quick-open')

    utools.onPluginEnter(({code, type, payload, optional}) => {
        if (code === 'quickOpen' || code === 'quickOpenSetting' || code === 'qo') {
            mVue.initData()
        } else {
            let result = utools.db.get(code)
            utools.hideMainWindow()
            switch (result.data.type) {
                case '1':
                    window.openItem(result.data.message)
                    utools.outPlugin()
                    break
                case '2':
                    window.runBat(result.data.message)
                    break
            }
        }
    });
</script>

</html>